<template>
  <div style="padding-bottom: 140px">
    <ul class="Header" v-if="messages.coverImgUrl">
      <li class="tupian">
        <img :src="messages.coverImgUrl" alt="" />
      </li>
      <li class="tlitle">
        <ul class="tlitleconter">
          <li class="titletop">
            <span>歌单</span>
            <h1>{{ messages.name }}</h1>
          </li>

          <li class="establishTiltle">
            <div class="imgtitle" border="0" style="cursor: pointer">
              <img :src="messages.creator.avatarUrl" alt="" />
            </div>

            <span class="creator" border="0" style="cursor: pointer">
              {{ messages.creator.nickname }}
            </span>
            <!-- 创建时间 -->
            <span style="color: rgb(136, 130, 130)">
              {{ messages.createTime | dates }}
            </span>
          </li>
          <li class="gonneTItle">
            <div>
              <div class="tisTitle quanb" border="0" style="cursor: pointer">
                <div class="quanb" @click="bofang">
                  <span>
                    <img src="../assets/bofang.png" alt="" />
                  </span>
                  <span> 播放全部 </span>
                </div>
                <span class="tianj" @click="addGeBofang">
                  <div>
                    <img src="../assets/tj.png" alt="" />
                  </div>
                </span>
              </div>
            </div>
            <div border="0" class="tisTitle" style="cursor: pointer">
              <div class="goningm">
                <img src="../assets/shj.png" alt="" />
              </div>
              <span> 收藏({{ messages.subscribedCount | nubuers }}) </span>
            </div>
            <div border="0" class="tisTitle" style="cursor: pointer">
              <div class="goningm">
                <img src="../assets/fsx.png" alt="" />
              </div>
              <span> 分享({{ messages.shareCount | nubuers }}) </span>
            </div>
            <div border="0" class="tisTitle" style="cursor: pointer">
              <div class="goningm">
                <img src="../assets/xzqb.png" alt="" />
              </div>
              <span> 下载全部 </span>
            </div>
          </li>
          <li class="biaoq">
            <span>标签：</span>
            <span
              border="0"
              style="color: rgba(29, 112, 221, 0.705); cursor: pointer"
              v-for="(item, index) in messages.tags"
              :key="index"
            >
              {{ item }}/
            </span>
          </li>
          <li class="bofang">
            <span>歌曲：{{ messages.trackCount | nubuers }}</span>
            <span style="margin-left: 10px"
              >播放：{{ messages.playCount | nubuers }}</span
            >
          </li>
          <li class="bofang">
            <span>简介：{{ messages.description | styleTxet }}</span>
          </li>
        </ul>
      </li>
    </ul>
    <div class="daohan">
      <nabas :datas="tabas"></nabas>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import API from "../http/API";
import { Message } from "element-ui";
import nabas from "../components/nabas.vue";
export default {
  components: {
    Message,
    nabas,
  },
  data() {
    return {
      tabas: [
        {
          titlie: "歌曲列表",
          to: "/Songlistdetails/songlist",
        },
        {
          titlie: "评论",
          to: "/home/exclusivecustomization",
        },
        {
          titlie: "收藏",
          to: "/home/songlist",
        },
      ],
      //歌单信息
      messages: [],
      //歌曲信息
      geuimessages: [],

      ID: [],
      //判断歌曲有没有加载完成

      onJiazai: false,
      //开始循环项目
      isxhuan: 0,
    };
  },
  activated() {},
  created() {
    this.http();
  },
  mounted() {},

  methods: {
    //添加新歌到播放列表
    addGeBofang() {
      let array2 = JSON.parse(localStorage.getItem("bofang"));

      var newArray = array2.songs.map(function (item) {
        return item.id;
      });

      // var newArray = this.geuimessages.songs.map(function (item) {

      //     return item.id
      //   });

      var newArrayre = this.geuimessages.songs.filter(function (item) {
        return newArray.indexOf(item.id) == -1;
      });

      localStorage.setItem("Addbofang", JSON.stringify(newArrayre));
      this.$store.commit("addPalay");
    },

    //播放
    bofang() {
      if (this.onJiazai == false) {
        return this.$message({
          message: "歌单未加载完成。。。",
          type: "warning",
        });
      }
      this.$alert("该操作会把当前歌单替换成播放内容！", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          // alert(action)
          if (action == "confirm") {
            this.geuimessages.songs[0].lentdate = true;
            // console.log(this.geuimessages.songs[0].lentdate);
            // console.log(this.geuimessages);
            localStorage.setItem("bofang", JSON.stringify(this.geuimessages));
            this.$store.commit("geq");
            this.$store.commit("shuax", false);
          } else {
            return this.$message({
              message: "您取消的当前的操作",
              type: "warning",
            });
          }
        },
      });

      // console.log(this.$store.state.bofang);
    },
    //
    http() {
      // console.log(this.$route.query.id);
      this.$get(API.PLAYLIST_DETAIL, {
        id: this.$route.query.id,
      })
        .then((data) => {
          // console.log(data);
          if (data.code == 200) {
            this.messages = data.playlist;

            //拿到当前数据的歌单有多少歌曲
            this.fenliu();
          }
        })
        .catch((err) => {});
    },

    //分流处理
    async fenliu() {
      this.ID = [];
      if (this.messages.trackCount > 1000) {
        //当歌单大于1000的时候要循环或多少次达到歌单歌曲数量

        this.geqxin(1000).then((id) => {
          // console.log(id);

          this.$get(API.SONG_DETAIL, {
            ids: id,
          }).then((e) => {
            // console.log(e);
            // this.$store.commit("geui", e);
            // localStorage.setItem("song", JSON.stringify(e));
            // alert(index)
            this.geuimessages = e;
            this.onJiazai = true;
          });
        });
      } else {
        this.geqxin(this.messages.trackIds.length).then((id) => {
          // console.log(id);
          this.$get(API.SONG_DETAIL, {
            ids: id,
          }).then((e) => {
            // console.log(e);
            this.geuimessages = e;
            this.onJiazai = true;
            // localStorage.setItem("song", JSON.stringify(e));
          });
        });
      }
    },

    async geqxin(e) {
      // console.log(e);
      let is = [];
      let index = this.isxhuan;
      for (; index < e; index++) {
        is.push(this.messages.trackIds[index].id);
      }
      is = is.toString();
      // this.ID = this.ID.toString();
      // console.log(this.ID);
      // console.log(is);
      return is;
    },
  },
  beforeDestroy() {
    //歌单信息
  },
  filters: {
    dates(val) {
      // console.log(val);
      // var date = parseInt(val) ;
      let date = new Date(val);
      //   yyyy-mm-dd

      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + " ";
      let h = date.getHours() + ":";
      let m = date.getMinutes() + ":";
      let s = date.getSeconds();
      return Y + M + D;
    },
    nubuers(val) {
      if (val < 10000) {
        return val;
      } else if (val > 100000000) {
        val = parseInt(val / 100000000);
        return val + "亿";
      } else {
        val = parseInt(val / 10000);
        return val + "万";
      }
    },
    styleTxet(val) {
      if (!val) return "";
      if (val.length > 20) {
        return val.slice(0, 20) + "...";
      }
      return val;
    },
  },
  deactivated() {
    this.messages = [];
    //歌曲信息
    this.geuimessages = [];

    this.ID = [];

    //开始循环项目
    this.isxhuan = 0;
  },
};
</script>
<style lang="less" scoped>
@grergb: rgb(240, 82, 82);
@baise: white;
.daohan {
  margin-right: 50px;
  margin-left: 50px;
}
.Header {
  // overflow: hidden;
  // width: 100%;
  display: flex;
  height: 220px;
  margin-bottom: 20px;
  margin-top: 40px;
  margin-right: 40px;
  margin-left: 40px;
  .tupian {
    height: 100%;
    width: 220px;
    border-radius: 5px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tlitle {
    flex: 1;
    margin-left: 20px;
    // height: 100%;
    // width: 100%;

    .tlitleconter {
      width: 100%;
      height: 100%;
      // border: 1px solid #000;
      .titletop {
        height: 40px;
        // border: 1px solid #000;
        display: flex;
        align-items: center;
        span {
          &:nth-child(1) {
            color: rgb(223, 87, 87);
            // display: block;
            padding: 3px 3px 3px 3px;
            border: 1px solid rgb(223, 87, 87);
            border-radius: 3px;
          }
        }
        h1 {
          margin-left: 10px;
          font-size: 23px;
          font-weight: 550;
        }
      }
      .establishTiltle {
        margin-top: 10px;
        height: 30px;
        display: flex;
        align-items: center;

        .imgtitle {
          height: 100%;
          width: 30px;
          border-radius: 50%;
          // border: 1px solid #000;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .creator {
          color: rgba(29, 112, 221, 0.705);
        }
        span {
          margin-left: 10px;

          // border: 1px solid #000;
        }
      }
      //功能件
      .gonneTItle {
        margin-top: 15px;
        display: flex;
        .tisTitle {
          margin-right: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 25px;
          overflow: hidden;
          &:nth-child(1) {
            height: 35px;
            width: 170px;
            background-color: @grergb;
            color: rgb(233, 227, 227);
            .quanb {
              height: 100%;
              display: flex;
              flex: 1;
              align-items: center;
              justify-content: center;
              &:hover {
                background-color: rgb(207, 59, 59);
              }

              span {
                margin-left: 20px;
                &:nth-child(1) {
                  display: block;
                  width: 15px;
                  height: 15px;
                  // border: 1px solid #000;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                &:nth-child(2) {
                  margin-left: 10px;
                  margin-right: 10px;
                  // font-size: 18px;
                }
              }
            }
            .tianj {
              // margin-left: 20px;
              background-color: rgb(240, 82, 82);
              // padding-right: 20px;
              width: 50px;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              div {
                width: 20px;
                height: 20px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
          &:nth-child(n + 2) {
            height: 30px;
            border: 1px solid rgb(136, 130, 130);
            // border: 1px solid #000;
            padding-left: 20px;
            padding-right: 20px;
            .goningm {
              width: 23px;
              height: 23px;
              background: none;
              margin-right: 0;
              margin-right: 5px;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          &:nth-child(3) {
            height: 30px;
            border: 1px solid rgb(136, 130, 130);
            // border: 1px solid #000;
            .goningm {
              width: 20px;
              height: 20px;
              background: none;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          &:nth-child(4) {
            height: 30px;
            border: 1px solid rgb(136, 130, 130);
            // border: 1px solid #000;
            .goningm {
              width: 16px;
              height: 16px;
              background: none;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
      //标签
      .biaoq {
        margin-top: 20px;
      }
      .bofang {
        margin-top: 10px;
      }
    }
  }
}
</style>